<!-- 首页仪表盘 -->
<template>
  <div class="Echarts" style="position: relative;z-index: 1;">
    <div id="echarts" style="width: 100%; height: 270px;"></div>
  </div>
</template>

<script>
import { reactive, onMounted, onUnmounted, toRefs, watch } from 'vue'
import * as echarts from 'echarts'
const { echartLevel } = require('../utils/util.js')


export default {
  name: 'GaugeEcharts',
  props: ['value'],
  setup(props) {  
    const state = reactive({
      colors: [
        ['#5794FE', '#64D9FF'],
        ['#FEA557', '#FEDD57'],
        ['#FE5757', '#FEA557']
      ][echartLevel(props.value).level],
      chartData: 0,
      Chart: null,
      echartsV: 0
    })

    watch(
      () => props.value,
      val => {
        // console.log('echarts监听', val)
        state.chartData = val
        setTimeout(() => {
          state.colors = [
            ['#5794FE', '#64D9FF'],
            ['#FEA557', '#FEDD57'],
            ['#FE5757', '#FEA557']
          ][echartLevel(val).level]

          gaugeInit()
        })
      },
      { deep: true, immediate: true }
    )

    

    onMounted(() => {
      setTimeout(() => {
        gaugeInit()
      })
    })

    onUnmounted(() => {
      state.Chart.dispose();
    })

    const resize = () => {
      state.Chart.resize()
    }

    const gaugeInit = () => {
      // 指定图表的配置项和数据
      const option = {
        series: [
          {
            type: 'gauge',
            min: 0,
            max: 2,
            startAngle: 220,
            endAngle: -40,
            splitNumber: 12,
            color: new echarts.graphic.LinearGradient(
              0, 0, 1, 0,
              [{
                  offset: 0,
                  color: state.colors[0],
                },
                {
                  offset: 1,
                  color: state.colors[1],
                }
              ]
            ),
            progress: {
              show: true,
              roundCap: true,
              width: 20
            },
            axisLine: {
              roundCap: true,
              lineStyle: {
                width: 20
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            pointer: {
              show: false
            },
            detail: {
              offsetCenter: [0, 0],
              valueAnimation: true,
              color: state.colors[0],
              fontWeight: 'bold',
              fontSize: '40px',
              formatter: function (value) {
                return echartLevel(value).title
              },
              rich: {
                value: {
                  fontSize: 60,
                  fontWeight: 'bolder',
                  color: '#f00'
                },
                unit: {
                  fontSize: 20,
                  color: '#999',
                  padding: [0, 0, -20, 10]
                }
              }
            },
            title: {
              color: '#000',
              fontSize: '14px',
              offsetCenter: ['0', '40%'],
            },
            data: [
              {
                value: state.chartData,
                name: 'TVOC',
              }
            ]
          }
        ]
      }

      state.Chart = echarts.init(document.getElementById('echarts'))
      state.Chart.setOption(option)
    }
    return {
      ...toRefs(state),
      gaugeInit
    }
  },
}
</script>
<style lang='less' scoped>
 
</style>